<template>
  <div>
    <p-s-i-list-head
      ref="listHead"
      :search.sync="search"
      :psi-type="psiType"
      title="产品管理"
      placeholder="请输入产品名称"
      main-title="新建产品"
      @on-handle="listHeadHandle"
      @on-search="psiSearch"
      @on-export="exportInfos"/>
    <div
      xs-empty-icon="nopermission"
      xs-empty-text="暂无权限"
      class="psi-container">
      <p-s-i-table-head
        ref="psiTableHead"
        :psi-type="psiType"
        @exportData="exportData"
        @filter="handleFilter"
        @handle="handleHandle"
        @scene="handleScene"/>
      <el-table
        v-loading="loading"
        id="psi-table"
        :data="list"
        :height="tableHeight"
        :cell-style="cellStyle"
        class="n-table--border"
        stripe
        border
        highlight-current-row
        style="width: 100%"
        @row-click="handleRowClick"
        @sort-change="sortChange"
        @header-dragend="handleHeaderDragend"
        @selection-change="handleSelectionChange">
        <el-table-column
          show-overflow-tooltip
          type="selection"
          align="center"
          width="55"/>
        <el-table-column
          v-for="(item, index) in fieldList"
          :key="index"
          :fixed="index==0"
          :prop="item.prop"
          :label="item.label"
          :width="item.width"
          :formatter="fieldFormatter"
          show-overflow-tooltip>
          <template
            slot-scope="scope">
            <el-popover
              v-if="item.prop === 'images'"
              :disabled="isImg(scope.row[item.prop]) ? false : true"
              placement="top-start"
              title="产品图片预览"
              trigger="hover">
              <XhPicture
                :value="scope.row[item.prop]"
                :disabled="picDisable"
              ></XhPicture>
<!--              <div style="width: 80px;" v-for="itemPic in scope.row[item.prop]">-->
<!--                <img :src="itemPic.url" width="100%" alt="">-->
<!--              </div>-->
              <div class="table-head-name" :class="isImg(scope.row[item.prop])?'':'imgesLookColor'" slot="reference">{{ look }}</div>
            </el-popover>
            <div v-else class="table-head-name" :title="scope.row[item.prop]">{{ scope.row[item.prop] }}</div>
          </template>
        </el-table-column>
        <el-table-column/>
        <el-table-column
          fixed="right"
          width="36">
          <template
            slot="header" slot-scope="{}">
            <i class="el-icon-setting table-set" @click="handleTableSet"></i>
          </template>
        </el-table-column>
      </el-table>
      <div class="p-contianer">
        <el-pagination
          :current-page="currentPage"
          :page-sizes="pageSizes"
          :page-size.sync="pageSize"
          :total="total"
          class="p-bar"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"/>
      </div>
    </div>
    <product-detail
      v-if="showDview"
      :id="rowID"
      class="d-view"
      @handle="handleHandle"
      @hide-view="showDview=false"/>
    <fields-set
      :psi-type="psiType"
      :dialog-visible.sync="showFieldSet"
      @set-success="setSave"/>
  </div>
</template>

<script>
import XhPicture from '../../../components/CreateCom/XhPicture'
import fiveStars from '../../../components/CreateCom/fiveStars'
import ProductDetail from './ProductDetail'
import table from '../mixins/table'

export default {
  /** 客户管理 的 产品列表 */
  name: 'MaterialIndex',
  components: {
    ProductDetail,
    XhPicture,
    fiveStars
  },
  mixins: [table],
  data() {
    return {
      psiType: 'product',
      look: '预览',
      picDisable: true
    }
  },
  computed: {},
  mounted() {},
  methods: {
    /** 通过回调控制style */
    cellStyle({ row, column, rowIndex, columnIndex }) {
      if (column.property === 'name') {
        return { color: '#3E84E9', cursor: 'pointer' }
      } else {
        return ''
      }
    },
    isImg(item) {
      if (!item) {
        return false
      } else {
        if (item.length === 0) {
          return false
        }
      }
      return true
    }
  }
}
</script>

<style lang="scss" scoped>
  @import '../../psimanagement/styles/table.scss';
  .imgesLookColor{
    color: #CDCDCD;
  }
</style>

